<template>
  <div class="app-container">
    <div class="background"></div>
    <!-- 只在非登录和非用户仪表盘页面显示Header -->
    <Header v-if="$route.path !== '/login' && $route.path !== '/user-dashboard'" />
    <div class="main-content">
      <!-- 只在非登录、非用户仪表盘、非主页页面显示Sidebar -->
      <Sidebar v-if="$route.path !== '/login' && $route.path !== '/user-dashboard' && $route.path !== '/home'" />
      <!-- 主页使用特殊的样式类，确保内容占据整个屏幕 -->
      <router-view :class="{ 'router-view': $route.path !== '/home', 'home-fullscreen': $route.path === '/home' }" />
    </div>
  </div>
</template>

<script setup>
import Header from './components/Header.vue'
import Sidebar from './components/Sidebar.vue'
import { useRoute } from 'vue-router'
// 在main.js中全局导入样式，避免在组件中重复导入
// import './styles/theme.css'
// import './styles/components.css'
// import './styles/common-styles.css'

// 为了在模板中使用$route
useRoute()
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  background-color: var(--bg-light);
  color: var(--text-primary);
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: var(--bg-light);
}

.main-content {
  display: flex;
  flex: 1;
  transition: all 0.3s ease;
  position: relative;
}

.router-view {
  flex: 1;
  padding: var(--spacing-lg);
  background-color: var(--bg-white);
  display: flex;
  flex-direction: column;
}

/* 主页全屏样式 */
.home-fullscreen {
  flex: 1;
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .main-content {
    position: relative;
  }
  
  .router-view {
    padding: var(--spacing-md);
  }
  
  .home-fullscreen {
    width: 100%;
    height: 100vh;
  }
}
</style>